<script lang="ts" setup>
import { useLocale } from '@/locale/locale';

const active = defineModel<number>({ default: 0 });
const { t } = useLocale();
</script>

<template>
  <view class="order-tabs">
    <view :class="{ 'is-active': active === 0 }" class="order-tabs__tab" @click="active = 0">
      <text>{{ t('LAKey_friendAll') }}</text>
    </view>
    <view :class="{ 'is-active': active === 1 }" class="order-tabs__tab" @click="active = 1">
      <text>{{ t('LOKey_orderToPay') }}</text>
    </view>
    <view :class="{ 'is-active': active === 2 }" class="order-tabs__tab" @click="active = 2">
      <text>{{ t('LOKey_orderReservationSuccess') }}</text>
    </view>
    <view :class="{ 'is-active': active === 3 }" class="order-tabs__tab" @click="active = 3">
      <text>{{ t('LOKey_orderCancel') }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.order-tabs {
  align-items: center;
  background-color: white;
  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(100, 100, 111, 0.08);
  display: flex;
  justify-content: space-around;
  padding: 28rpx 24rpx 20rpx;

  &__tab {
    border-bottom: 4rpx solid transparent;
    color: #707070;
    font-size: 28rpx;
    line-height: 40rpx;
    padding-bottom: 4rpx;

    &.is-active {
      border-bottom-color: #269c74;
      color: #3d3d3d;
      font-weight: 500;
    }
  }
}
</style>
